<template>
	<div class="SubmitOrder">
		<div class="SubmitOrder_top">
			<van-nav-bar title="提交订单" left-arrow @click-left="onClickLeft" />
			<div class="userinfo">
				<div class="dizhi" @click="showPopup">
					<sapn>金峰小区·丽都桃源公寓H-1栋一单元6六层601室</sapn>
					<van-icon name="arrow" />
				</div>
        <van-popup
            v-model:show="show"
            closeable
            close-icon-position="top-right"
            position="bottom"
            :style="{ height: '60%' }"
        >
          <div class="xuan_dz">选择收货地址</div>
          <div class="xuan_info" v-for="itme in dizhi" :key="itme">
            <van-checkbox v-model="itme.check" @click="xuanze">
              <div class="info_bj">
                <span><el-tag type="warning">家</el-tag><span>{{ itme.address }}</span></span>
                <span style="color: #999999;font-size: 14px">{{itme.name}}先生&nbsp;{{ itme.phone }}</span>
              </div>
            </van-checkbox>
            <div class="xiugui">
              <el-icon><edit/></el-icon>
            </div>
          </div>
        </van-popup>
				<div class="xinxi">唐楚钧&nbsp;先生&nbsp;18074681227</div>
				<div class="jinggao">为减少接触，降低风险，推荐使用无接触配送</div>
				<div class="zhi_time"><span style="font-size: 20px;font-weight: bold">立即送出</span><span
						style="color: #e38528;font-size: 20px">14:00
						<van-icon name="arrow" />
					</span></div>
			</div>
		</div>
		<div class="zhifu">
			<div style="font-size: 20px;font-weight: bold">支付方式</div>
			<div>
				<span style="font-size: 16px;">有机会优惠<span style="color: #ffcc33;font-weight: bold">0.18</span>元</span>
				&nbsp;<span style="font-size: 20px;">极速支付
					<van-icon name="arrow" />
				</span>
			</div>
		</div>
		<div class="dz_info">
			<div class="chwl">
				<!--        list.shop.shopName-->
				<span style="font-size: 20px;font-weight: bold">{{ shopName }}</span>
				<van-icon name="arrow" />
			</div>
			<div class="dd_info">
				<!--        list.dishes.dishesPhotoOrVideoUrl-->
				<van-image fit="cover" radius="5px" width="100" height="100" :src="dishesPhotoOrVideoUrl" />
				<div class="dd_info_fiyi">
					<div class="numone">
						<!--            list.dishes.dishesName-->
						<div>{{dishesName}}</div>
						<div>
							<span style="color:#999999;text-decoration:line-through">{{startingPrice}}</span>
							￥{{price}}
						</div>
					</div>
					<div>×{{orderNumber}}</div>
				</div>
			</div>
			<div class="juli">
				<div><span>打包费
						<van-icon name="question-o" />
					</span><span>￥{{packingFeePerDish}}</span></div>
				<div><span>配送费</span><span>￥{{deliveryFee}}</span></div>
			</div>
			<div class="dada">
				<div class="zhu_hb">
					<div class="hb">
						<van-image :src="fl" />
						<span>满返商家代金券优惠</span>
					</div>
					<div>返满48减6商家券</div>
				</div>
				<div class="zhu_hb">
					<div class="hb">
						<van-image :src="hb" />
						<span>吃了么红包</span>
					</div>
					<div>-￥{{preferentialAmount}}
						<van-icon @click="hongbao(cartId,orderNumber,dishesId,shopId,userId,number)" name="arrow" />
					</div>
				</div>
				<!--        <div class="zhu_hb">-->
				<!--          <div class="hb">-->
				<!--            <van-image :src="yhj"/>-->
				<!--            <span>商家代金券</span>-->
				<!--          </div>-->
				<!--          <div>-￥7-->
				<!--            <van-icon name="arrow"/>-->
				<!--          </div>-->
				<!--        </div>-->
				<!--        <div class="zhu_hb">-->
				<!--          <div class="hb">-->
				<!--            <van-image :src="yhj"/>-->
				<!--            <span>配送券</span>-->
				<!--          </div>-->
				<!--          <div>-￥7-->
				<!--            <van-icon name="arrow"/>-->
				<!--          </div>-->
				<!--        </div>-->
			</div>
			<div class="youhui">
				<span>优惠规则
					<van-icon name="question-o" />
				</span>
				<span>已优惠<span style="color:red;">￥27.0</span>&nbsp;小计<span
						style="font-size: 24px ;">&nbsp;￥{{sum}}</span></span>
			</div>
		</div>
		<div class="zuihou">
			<div>
				<span>备注</span>
				<span>推荐使用无接触配送
					<van-icon name="arrow" />
				</span>
			</div>
			<div>
				<span>如遇缺货</span>
				<span>缺货时电话与我沟通
					<van-icon name="arrow" />
				</span>
			</div>
			<div>
				<span>发票</span>
				<span>该店不支持线上开票，请联系商户</span>
			</div>
		</div>
		<van-sticky :offset-bottom="80" position="bottom">
			<div class="fuqian">
				<div class="yi">
					<span style="color: white;font-size: 24px;font-weight: bold">￥{{sum}}</span>
					<span style="color:#999999;font-size: 10px">已优惠￥27.1</span>
				</div>
				<div class="er"><span>找人付</span></div>
				<div class="san"><span @click="submit(preferentialAmount)">提交订单</span></div>
			</div>
		</van-sticky>
	</div>
</template>
<script>
	import hongbao from "../assets/hb.png"
	import fanli from "../assets/fl.png"
	import youguijuan from "../assets/yhj.png"
	import {Edit} from '@element-plus/icons'
	import {ref} from "vue";
	// import qs from "qs";

	export default {
    components: {
      Edit
    },
		data() {
			const onClickLeft = () => history.back();
			return {
        dizhi:[
          {address:"长沙大计772号",name:"胡娇娇",phone:12345678936},
          {address:"长沙大计772号",name:"胡娇娇",phone:12345678936},
          {address:"长沙大计772号",name:"胡娇娇",phone:12345678936},
        ],
				preferentialAmount: 0,
				order: {
					// orderId:orderId,
					dishesId:this.$route.query.dishesId,
					shopId: this.$route.query.shopId,
					number:this.$route.query.number,
					orderPrice:this.orderPrice,
				},
				// dishesId:'',
				// shopId:'',
				// userId:'',
				dishesId:this.$route.query.dishesId,
				shopId: this.$route.query.shopId,
				userId: 2,
				number:this.$route.query.number,
				orderPrice:0.00,
				cart: {},
				hb: hongbao,
				fl: fanli,
				yhj: youguijuan,
				onClickLeft,
				shopName: '',
				dishesPhotoOrVideoUrl: '',
				dishesName: '',
				startingPrice: '',
				price: '',
				orderNumber: '',
				deliveryFee: '',
				packingFeePerDish: '',
				sum: '',
				dindan:'',
				addressList:''
				// cartId:'',
			}

		},
    setup() {
      const show = ref(false);
      const showPopup = () => {
        show.value = true;
      };
      return {
        show,
        showPopup,
      };
    },
		mounted() { //挂载之后执行的方法
			this.getCart();
			this.getAddress();
		},
		// computed:{
		//   sumAmount(){
		//     let sum = 0;
		//     this.list.forEach(item =>{
		//         sum = sum + item.dishes.price;
		//     })
		//     return sum*100;
		//   }
		// },

		methods: {
      xuanze(){
        this.dizhi.forEach(item => {
          if (item.check) {
            this.show=false;
          }
        })
      },
			hongbao(cartId,orderNumber,dishesId,shopId,userId,number){
				
				this.$router.push({
					path: '/myAssetsOrderList',
					query: {
						cartId: cartId,
						orderNumber:orderNumber,
						dishesId:dishesId,
						shopId:shopId,
						userId: 2,
						number:number,
						// orderPrice:sum,
					}
					
				})
			},
			getAddress() {
				// let userId = this.$route.query.id;
				// console.log("userId=" + userId);
				this.$axios.get('/user/shipping-address/list', {
						// params: {
						// 	cartId: this.$route.query.cartId
						// }
					})
					.then(res => {
						this.addressList = res.result.data;
						console.log("this.addressList"+this.addressList);
						// console.log(this.$route.query.cartId);
					}).catch(error => {
						console.log("error:" + error)
					})
			},
			submit(preferentialAmount) {
				// alert("preferentialAmount="+preferentialAmount);
				this.$axios.post('/orders/insert', (this.order))
					.then(res => {
						// this.orderId = res.result.cart;
						let dindan = res.result.insert;
						this.$router.push({
							path: '/orderInfo',
							query: {
								// orderId: 1,
								preferentialAmount: preferentialAmount,
								orderId: dindan
								
							}
						})
						console.log('ds',res)
						this.$message({
							message: "添加订单成功",
							type: "success"
						
						})
						this.$axios.get('/shopping-cart/delete', {
								params: {
									id: this.$route.query.cartId
								}
							// })
							// .then(res => {
								
							// 	alert("删除成功");
							}).catch(error => {
								console.log("error:" + error)
							})
						
					}).catch(e => {
						this.$message({
							message: e,
							type: "warning"
						})

					})

			}

			,
			
			getCart() {
				// let userId = this.$route.query.id;
				// console.log("userId=" + userId);
				this.$axios.get('/shopping-cart/cart', {
						params: {
							cartId: this.$route.query.cartId
						}
					})
					.then(res => {
						// alert((this.price * this.orderNumber + this.packingFeePerDish + this.deliveryFee - this
						// 		.preferentialAmount).toFixed(2));
						// console.log("preferentialAmount="+this.preferentialAmount);
						
						this.cart = res.result.cart;
						this.shopName = this.cart.shop.shopName;
						this.dishesPhotoOrVideoUrl = this.cart.dishes.dishesPhotoOrVideoUrl;
						this.dishesName = this.cart.dishes.dishesName;
						this.startingPrice = this.cart.dishes.startingPrice
						this.price = this.cart.dishes.price
						this.orderNumber = this.$route.query.orderNumber
						this.deliveryFee = this.cart.dishes.deliveryFee
						this.packingFeePerDish = this.cart.dishes.packingFeePerDish
						this.preferentialAmount = this.$route.query.preferentialAmount || 0;
						this.cartId = this.$route.query.cartId;
						this.sum = (this.price * this.orderNumber + this.packingFeePerDish + this.deliveryFee - this
							.preferentialAmount).toFixed(2);
						this.order.orderPrice = (this.price * this.orderNumber + this.packingFeePerDish + this.deliveryFee - this
								.preferentialAmount).toFixed(2);
						

						console.log("this.order.orderPrice="+this.order.orderPrice);
						// console.log(this.$route.query.cartId);
					}).catch(error => {
						console.log("error:" + error)
					})
			},
		}
	}
</script>
<style scoped>
	.SubmitOrder {
		width: 100%;
		height: 100%;
		background: #efefef;
		margin-bottom: 50px;
	}

	.SubmitOrder_top {
		background: linear-gradient(#ffcc33 10%, #fedfe8);
		height: 305px;
	}

	.SubmitOrder_top .van-nav-bar {
		background: none;
	}

	.userinfo {
		margin: 15px;
		background: white;
		border-radius: 10px;
	}

	.dizhi {
		font-size: 24px;
		font-weight: bold;
		display: flex;
		align-items: center;
		padding-top: 25px;
		margin: 0 15px 15px 15px;
	}

	.xinxi {
		color: #999999;
		font-size: 20px;
		margin: 15px;
	}

	.jinggao {
		color: #e38528;
		font-size: 16px;
		margin: 15px;
	}

	.zhi_time {
		display: flex;
		justify-content: space-between;
		margin: 15px 15px 0 15px;
		padding-bottom: 15px;
	}

	.zhifu {
		background: white;
		display: flex;
		justify-content: space-between;
		margin: 15px;
		padding: 20px;
		align-items: center;
	}

	.dz_info {
		border: 1px solid #999999;
		margin: 15px;
		background: white;
	}

	.dd_info {
		display: flex;
		flex-direction: row;
		padding: 10px 0 10px 0;
		border-bottom: 1px #999999 solid;
		border-top: 1px #999999 solid;
	}

	.dd_info_fiyi {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 70%;
		margin: 0 10px 0 10px;

	}

	.numone {
		display: flex;
		justify-content: space-between;
	}

	.juli div {
		margin: 15px 0 15px 0;
		display: flex;
		justify-content: space-between;
	}

	.dada {
		border-bottom: 1px solid #999999;
		border-top: 1px solid #999999;
	}

	.zhu_hb {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 15px 0 15px 0;
	}

	.hb {
		display: flex;
		align-items: center;
	}

	.youhui {
		display: flex;
		flex-direction: row;
		padding: 15px 0 15px 0;
		justify-content: space-between;
		align-items: center;
	}

	.dz_info .van-grid {
		justify-content: space-around;
	}

	.dz_info .van-grid-item__text {
		font-weight: bold;
		color: black;
	}


	.peisong_info div {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		margin-top: 10px;
	}

	.zuihou {
		background: white;
		border-radius: 10px;
		margin: 15px;
	}

	.zuihou div {
		display: flex;
		justify-content: space-between;
		margin: 10px;
	}

	.fuqian {
		display: flex;
		margin: 15px;
		justify-content: space-between;
		margin: 25px 15px 25px 15px;
		align-items: center;
	}

	.yi {
		display: flex;
		flex-direction: column;
		background: black;
		flex-grow: 2;
		border-radius: 30px 0 0 30px;
	}

	.yi span {
		margin-left: 20px;
	}

	.er {
		height: 48px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-grow: 1;
		color: #ffcc33;
		font-weight: bold;
		background: #464646;

	}

	.san {
		height: 48px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-grow: 1;
		color: black;
		font-weight: bold;
		background: #ffcc33;
		border-radius: 0 30px 30px 0;
	}
  .xuan_dz {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 30px;
    font-size: 18px;
  }

  .xuan_info {
    margin: 15px 10px 15px 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #999999;
    padding-bottom: 10px;
  }
  .info_bj{
    display:flex;
    flex-direction: column;
  }
  .xiugui{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
</style>
